<template>
  <t-modal :title="orgName" :width="800" :visible="visible" destroyOnClose @cancel="handleCancel">
    <a-card :bordered="false">
      <tool-bar @search="$refs.table.refresh(true)" @reset="
                () => {
						(queryParam = {}), $refs.table.refresh(true);
					}
				">
        <template slot="toolForm">
          <a-form-item label="账号">
            <a-input v-model="queryParam.userNameId" placeholder="账号"/>
          </a-form-item>
          <a-form-item :label="$ct('fullName','姓名')">
            <a-input v-model="queryParam.userName" :placeholder="$ct('fullName','姓名')"/>
          </a-form-item>
        </template>
      </tool-bar>
      <div class="page-common-sub-box">
        <s-table ref="table" size="small" :columns="columns" :data="loadData"
                 rowKey="uuid" showPagination="auto" :rowClassName="rowClassName" :scroll="scrollXY">
					<span slot="serial" slot-scope="text, record, index">
						{{ index + 1 }}
					</span>
          <span slot="renderUserSex" slot-scope="text">
						{{ text | sexFilter }}
					</span>
          <span slot="renderUserHeadPortrait" slot-scope="text">
						<img
                :src="text"
                alt=""
                class="business-license"
                @click="preViewHeadPortrait(text)"
            />
					</span>
        </s-table>
      </div>
    </a-card>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <preview-image
        :visible.sync="visibleViewImg"
        :imgSrc="imgSrc"
    ></preview-image>
  </t-modal>
</template>

<script>
import {
  simpleListMixin
} from "@/mixins/simpleListMixin";
import {
  STable
} from "@/components";
import previewImage from "@/components/TopVUI/custom/previewImage.vue";

export default {
  name: "TableList",
  mixins: [simpleListMixin],
  components: {
    STable,
    previewImage
  },
  props: {
    visible: {
      type: Boolean,
    },
    orgId: {
      type: String | Number
    },
    orgName: {
      type: String
    }
  },
  data() {
    return {
      queryParam: {},
      selectedRowKeys: [],
      subHeight: 0,
      url: {
        getPageSet: "/mdata/user/getPageSet",
      },
      imgSrc: "",
      visibleViewImg: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.queryParam.orgId = this.orgId;
        const requestParameters = Object.assign({}, parameter, this.queryParam);
        return this.$post(this.url.getPageSet, requestParameters).then(
            (res) => {
              return res.data;
            }
        );
      },
      columns: [{
        title: "序号",
        align: "center",
        width: 50,
        scopedSlots: {
          customRender: "serial",
        }
      }, {
        title: "头像",
        align: "center",
        dataIndex: "userHeadPortrait",
        scopedSlots: {
          customRender: "renderUserHeadPortrait",
        },
        width: 100
      }, {
        title: "账号",
        align: "center",
        dataIndex: "userNameId",
        width: 150
      }, {
        title: "姓名",
        align: "center",
        dataIndex: "userName",
        langCode: "fullName",
        width: 150
      }, {
        title: "性别",
        align: "center",
        dataIndex: "userSex",
        scopedSlots: {
          customRender: "renderUserSex",
        },
        width: 80
      }, {
        title: "所属组织",
        align: "center",
        dataIndex: "orgName",
        langCode: "null",
        width: 200
      }]
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      };
    },
    scrollXY() {
      let subHeight = this.subHeight
      let height = subHeight - 80
      return {y: height, x: '100%'};
    },
  },
  filters: {
    sexFilter(sex) {
      const sexMap = {
        "UserSex.01": "男",
        "UserSex.02": "女",
        "UserSex.03": "未知"
      };
      return sexMap[sex];
    }
  },
  created() {
    this.$nextTick(() => {
      this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
    })
  },
  methods: {
    rowClassName(row) {
      return row.uuid === this.rows?.uuid ? "bg-bray" : ""; // 每条数据的唯一识别值
    },
    close() {
      this.$emit("close");
    },
    handleCancel() {
      this.close();
    },
    preViewHeadPortrait(val) {
      this.imgSrc = val;
      this.visibleViewImg = true;
    }
  },
};
</script>

<style lang="less" scoped>
.page-common-sub-box {
  max-height: 400px !important;
  height: calc(100vh - 400px) !important;
}

.business-license {
  cursor: pointer;
  padding: 5px;
  height: 36px !important;
  width: 36px !important;
}
</style>
